<template>
    <view>
			
			<!-- 如果评论列表为空 -->
			<view v-if="list=='' || list==undefined || list == null" style="width: 100%;height: 200upx;">
				<view style="width: 100%;height: 200upx;line-height: 200upx;text-align: center;font-size: 36upx;color: #666666;">
					~暂无评论~
				</view>
			</view>
			<!-- 评论 -->
			<view style="min-height: 200upx;background-color: #fff;line-height: 50upx;margin: 5upx 0upx 0upx;padding: 0upx 50upx;overflow: hidden;">
				<view style="margin-top: 10upx;">
					<!-- <text style="color: #888888;">最新评论</text> -->
				</view>
				<view style="width: 100%;margin: 10upx 0;" v-for="(item,key) in list" :key="key">
					<view style="color: #000;display: flex;">
						<image :src="item.real_head_img" mode="" style="width: 60upx;height: 60upx;display: inline-block;border-radius: 40upx;vertical-align: middle;"></image>
						<text style="flex: 5;padding-left: 14upx;font-weight: 666;">{{item.user_name}}</text>
						<text class="del-btn yticon icon-fork" @click="deleteCartItem(item.id)" style="flex: 1;text-align: right;" v-if="user_id == item.uid"></text>
					</view>
					<view style="color: #000;margin: 10upx 0upx 10upx 47upx;">
						<text style="margin-left: 20upx;">{{item.content}}</text>
					</view>
					<view style="color: #000;">
						<text style="margin-left: 58upx;color: #ccc;font-size: 24upx;">{{item.create_time}}</text>
					</view>
					
				</view>
			</view>
			
			
			
			<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
    </view> 
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
	    data() {
				return {
					res:{},
					article_id:'',
					user_id:'',
					list:[],
					loadingText: '加载中...',
					loadingType: 0,
					contentText: {
						contentdown: '上拉显示更多',
						contentrefresh: '正在加载...',
						contentnomore: '没有更多数据了'
					},
					page: 1,
					timer:{},
				}
	   },
		onLoad:function(e){
			this.article_id = e.articleid
			uni.getStorage({
				key: 'user_id',
				success: (res) => {
					this.user_id = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../../../../pages/login/login'
					});
				}
			});
		},
		// 上拉加载
		onReachBottom(){
			if (this.timer != null) {
				clearTimeout(this.timer)
			}
			this.timer = setTimeout(()=> {
				this.getmorenews()
			}, 1000);
		},
	  methods: {
			setAjax(){
				// 评论列表
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/LabelPaperComment/index?p=1',
					method: 'POST',
					data:{
						paper_id: this.article_id,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						if(res.data.code == 998){
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}
						console.log(res)
						this.list = res.data.data.list
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getmorenews() {
				let o = this
				this.page++;//每触底一次 page +1
				console.log(this.page)
				if (this.loadingType !== 0) {//loadingType!=0;直接返回
					return false;
				}
				this.loadingType = 1;
				uni.showNavigationBarLoading();//显示加载动画
				uni.request({
					url:'https://cx.mingmeijt.com/Api/LabelPaperComment/index?p=' + this.page,
					method: 'POST',
					data: {
						paper_id: this.article_id,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: function(res) {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						if (res.data.data.list == '' || res.data.data.list == null) {//没有数据
							o.loadingType = 2;
							uni.hideNavigationBarLoading();//关闭加载动画
							return;
						}
						var tpcList = res.data.data.list
						o.list = o.list.concat(tpcList);//将数据拼接在一起
						o.loadingType = 0;//将loadingType归0重置
						uni.hideNavigationBarLoading();//关闭加载动画
					}
				});
			},
			deleteCartItem(id) {
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/LabelPaperComment/deletePaperComment',
					method: 'POST',
					data:{
						user_id: this.user_id,
						paper_id: this.article_id,
						id: id,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						uni.showToast({
							title:res.data.msg,
							icon:"none"
						})
						if (res.data.code == 200) {
							this.setAjax()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>

<style lang="scss">
	
	/* 评论面板 */
	.mask{
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0,0,0,0);
		z-index: 9995;
		transition: .3s;
		
		.mask-content{
			width: 100%;
			min-height: 30vh;
			max-height: 70vh;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: .3s;
			overflow-y:scroll;
		}
		&.none{
			display: none;
		}
		&.show{
			background: rgba(0,0,0,.4);
			
			.mask-content{
				transform: translateY(0);
			}
		}
	}

</style>

